<template>
  <div class="box">
    第一个盒子
  </div>
  <!-- 要检测的元素添加个名字 -->
  <div class="box" ref="target">
    第二个盒子
  </div>
</template>

<script>
// useIntersectionObserver 检测目标元素的可见性。
import { ref } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'
export default {
  setup () {
    const target = ref(null)
    // stop             用于停止检测函数
    // target           被检测的元素
    // isIntersecting   布尔值，元素是否可见 true/false
    const { stop } = useIntersectionObserver(
      target,
      ([{ isIntersecting }], observerElement) => {
        // 如果元素可以，发送请求获取数据，并停止检测避免重复发送请求
        if (isIntersecting) {
          console.log('isIntersecting元素可见性，发送请求获取数据', isIntersecting)
          stop()
        }
      }
    )
    return { target }
  }
}
</script>

<style lang="less" scoped>
.box {
  width: 1000px;
  height: 200px;
  background-color: pink;
  margin: 500px auto;
}
</style>
